<template>
    <div class="by-chuli">
        <div class="additem">
            <div class="list">
                <div class="item item1">故障描述：</div>
            </div>
            <div class="list">
                <textarea name="" id="" cols="40" rows="10" placeholder="请描述故障内容详情" v-model="form.faultNote"></textarea>
            </div>
            <div class="list">
                <div class="item item1">上传图片：</div>
            </div>
            <div class="list postImg">
                <form class="uploadPicForm clearfix" id="uploadPicForm" enctype="multipart/form-data">
                    <div class="img1 clearfix" v-for="(urls, index) in imgs " :key="urls.value">
                        <div :class="{deleteBtn:!isImg}" class="delete clearfix" v-on:click="deleteImg(index)"><i class="iconfont icon-shanchu"></i></div>
                        <img class="img" :src="urls" />
                    </div>
                    <div class="addimg" v-on:click="imgClick()" v-if="this.fileList.length<3 && isImg">
                        <i class="iconfont icon-jiahao"></i>
                    </div>
                    <input style="float: left;  display: none;" type="file" id='uploadFile' accept="image/*" v-on:change="readLocalFile($event)">
                </form>
            </div>
        </div>
        <button :class="{btnBg:!isImg}" ref="addSafeBtn" type="button" class="btn btn-block btn-primary" @click="commit">提交</button>
    </div>
</template>

<script> 
import {
    getUserInfo,
    setUserInfo,
    logout
} from '@/utils/auth'
export default {
    data() {
        return {
            dialogImageUrl: "",
            dialogVisible: false,
            uploadUrl: `${window.apiPrefix}api/uploadImg`,
            form: {
                equipId: this.$route.query.equipId,
                siteId: this.$route.query.siteId,
                faultNote: '',
                faultImage: ''
            },
            detailList: [],
            imgs: [],
            files: [],
            fileList: [],
            isImg: true
        }
    },
    mounted() {
        this.getDetail()
    },
    watch: {
        fileList() {
            this.form.faultImage = "";
            this.fileList.forEach(item => {
                this.form.faultImage += (item + ',');
            });
            this.form.faultImage = this.form.faultImage.substr(
                0,
                this.form.faultImage.length - 1
            );
        }
    },
    methods: {
        //删除图片
        deleteImg(index) {
            this.imgs.splice(index, 1);
            this.fileList.splice(index, 1);
        },
        //图片click
        imgClick() {
            document.getElementById("uploadFile").click();
        },
        //图片上传
        readLocalFile(e) {
            let localFile = document.getElementById("uploadFile").files[0];
            if (!localFile) {
                return
            }
            //开关控制
            this.isImg = false
            this.$refs.addSafeBtn.disabled=true
            // console.log(this.$refs.addSafeBtn.disabled)

            // console.log(document.getElementById("uploadFile").files)
            this.files.push(localFile)


            //获取图片base64代码
            var reader = new FileReader();
            var content;
            var current = this;
            content = reader.readAsDataURL(localFile, "UTF-8");

            reader.onload = function (event) {
                content = event.target.result;
                current.imgs.push(content);
            }
            reader.onerror = function (event) {
                alert('error')
            }

            // console.log(this.imgs)

            //上传
            var formData = new FormData();
            formData.append('file', this.files[this.files.length - 1]);
            // console.log(formData.get("file"))
            this.$api.chaxun.uploadUrl(formData).then(res => {
                if (res.success) {
                    this.$refs.addSafeBtn.disabled=false
                    this.$$tip({
                        content: '该图片上传成功！'
                    })
                    this.fileList.push(res.data)
                    this.isImg = true
                }
            }).catch(res => {
                console.log(res)
            });;
        },
        //维修详情
        // getDetail() {
        //     this.$api.weixiu.repairequipdetail({
        //         id: this.$route.query.id
        //     }).then(res => {
        //         if (res.success) {
        //             this.detailList = res.data
        //             this.form.faultNote = res.data.faultNote
        //             for (let i in res.data.faultImageArr) {
        //                 this.fileList.push({
        //                     name:'1.png',
        //                     response:{
        //                         data:res.data.faultImageArr[i]
        //                     },
        //                     url:res.data.faultImageArr[i]
        //                 })
        //             }
        //         }
        //     });
        // },
        //提交
        commit() {
            console.log(this.fileList)
            if (this.form.faultNote == '') {
                this.$$tip({
                    content: '保养描述不能为空！'
                })
            } else {
                this.$api.guzhang.addtrouble(this.form).then(res => {
                    if (res.success) {
                        this.$$tip({
                            content: '提交成功'
                        })
                        this.$router.push({ path: "index", query: { token: getUserInfo() } });
                    }
                });
            }

        }
    }
}
</script>

<style>
</style>
